<template>
    <div id="rolelist">
        <span>rolelist</span>
        <div>{{ $route.meta.title }}</div>
        <div>rolelist：{{ rolelist }}</div>
        <div>page：{{ page }}</div>
        <div>total：{{ total }}</div>
        <div>size：{{ size }}</div>
        <div>get_rolelist：{{ get_rolelist }}</div>
        <div>get_rolepage：{{ get_rolepage }}</div>
        <div>get_roletotal：{{ get_roletotal }}</div>
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    computed: {
        ...mapState({
            rolelist: state => state.role.rolelist,
            page: state => state.role.page,
            total: state => state.role.total,
            size: state => state.role.size
        }),
        ...mapGetters({
            get_rolelist: 'role/getters_rolelist',
            get_rolepage: 'role/getters_page',
            get_roletotal: 'role/getters_total'
        })
    },
    methods: {
        ...mapMutations({
            m_rolelist: 'role/mutations_rolelist',
            m_rolepage: 'role/mutations_rolepage',
            m_roletotal: 'role/mutations_roletotal'
        }),
        ...mapActions({
            a_rolelist: 'role/actions_rolelist'
        })
    }
}
</script>
<style scoped>
#rolelist {
    background-color: pink;
    width: 400px;
    height: auto;
    margin: 200px auto;
    text-align: center;
    /* vertical-align: middle; */
}
</style>